<style>
    body{
        margin: 0;
    }

    .autumnHeaderClass{
        height: 160px;
        position: relative;
        overflow: hidden;
    }

    .autumnDivClass{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        --offset: 0px;
        --blur: 2px;
    }

    .autumnImgClass{
        display: block;
        width: 110%;
        height: 100%;
        object-fit: cover;

        transform: translateX(var(--offset));
        filter: blur(var(--blur));
    }
</style>

<script src="/js/header.js"></script>

<body>


<header class="autumnHeaderClass">
    <div class="autumnDivClass"><img src="/img/autumn/a1.png" class="autumnImgClass"></div>
    <div class="autumnDivClass"><img src="/img/autumn/a2_1.png" class="autumnImgClass" id="girlPic"></div>
    <div class="autumnDivClass"><img src="/img/autumn/a3.png" class="autumnImgClass"></div>
    <div class="autumnDivClass"><img src="/img/autumn/a4.png" class="autumnImgClass"></div>
    <div class="autumnDivClass"><img src="/img/autumn/a5.png" class="autumnImgClass"></div>
    <div class="autumnDivClass"><img src="/img/autumn/a6.png" class="autumnImgClass"></div>
</header>

</body>